<template>
	<view class="tab-hd">
		<view :class="['txt', tabOn == 1 ? 'on' : '']" @click="tabClick(1)">成员名单</view>
		<view :class="['txt', tabOn == 2 ? 'on' : '']" @click="tabClick(2)">测试记录</view>
		<view :class="['txt', tabOn == 3 ? 'on' : '']" @click="tabClick(3)">我的分销码</view>
	</view>
	<view class="tab-bd">
		<view v-show="tabOn === 1">
			<view class="item">
				<view class="item-hd">
					<view class="item-hd-l">
						<view class="init">Ky</view>
						<view class="con-box">
							<view class="name">Kylie</view>
							<view class="tips-box">
								<image class="img" src="@/static/images/my-icon9.png" mode=""></image>
								<view class="tips">店长会员</view>
							</view>
						</view>
					</view>
					<view class="item-hd-r">分销码</view>
				</view>
				<view class="item-ft">
					<view class="item-ft-l">
						<image class="img" src="@/static/images/my-icon6.png" mode=""></image>
						<view class="phone">15817895927</view>
					</view>
					<view class="item-ft-r">
						<image class="img" src="@/static/images/my-icon11.png" mode=""></image>
						<view class="txt">精致研究所</view>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="item-hd">
					<view class="item-hd-l">
						<view class="init">饭</view>
						<view class="con-box">
							<view class="name">饭饭</view>
							<view class="tips-box">
								<image class="img" src="@/static/images/my-icon10.png" mode=""></image>
								<view class="tips">普通会员</view>
							</view>
						</view>
					</view>
					<view class="item-hd-r">分销码</view>
				</view>
				<view class="item-ft">
					<view class="item-ft-l">
						<image class="img" src="@/static/images/my-icon6.png" mode=""></image>
						<view class="phone">15817895927</view>
					</view>
					<view class="item-ft-r">
						<image class="img" src="@/static/images/my-icon11.png" mode=""></image>
						<view class="txt">精致研究所</view>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="item-hd">
					<view class="item-hd-l">
						<view class="init">Lo</view>
						<view class="con-box">
							<view class="name">Lois</view>
							<view class="tips-box">
								<image class="img" src="@/static/images/my-icon10.png" mode=""></image>
								<view class="tips">普通会员</view>
							</view>
						</view>
					</view>
					<view class="item-hd-r">分销码</view>
				</view>
				<view class="item-ft">
					<view class="item-ft-l">
						<image class="img" src="@/static/images/my-icon6.png" mode=""></image>
						<view class="phone">15817895927</view>
					</view>
					<view class="item-ft-r">
						<image class="img" src="@/static/images/my-icon11.png" mode=""></image>
						<view class="txt">精致研究所</view>
					</view>
				</view>
			</view>
		</view>
		<view v-show="tabOn === 2">
			<!-- 测试记录 -->
			<view class="testTab-hd">
				<view :class="['testItem', item.state ? 'on' : '' ]" v-for="item in tabItems" :key="item.id" @click="handleTab(item.id)">{{item.name}}</view>
			</view>
			<view class="testTab-bd">
				<view class="testTab-bd-item">
					<view class="title">护肤测试评估报告</view>
					<view class="tips">用户名称：Kylie</view>
					<view class="tips">检测时间：2024-10-30 18:10</view>
					<view class="tips">检测结果：毛孔粗糙-轻度、肤色不均-轻度</view>
				</view>
				<view class="testTab-bd-item">
					<view class="title">护肤测试评估报告</view>
					<view class="tips">用户名称：Kylie</view>
					<view class="tips">检测时间：2024-10-30 18:10</view>
					<view class="tips">检测结果：毛孔粗糙-轻度、肤色不均-轻度</view>
				</view>
				<view class="testTab-bd-item">
					<view class="title">护肤测试评估报告</view>
					<view class="tips">用户名称：Kylie</view>
					<view class="tips">检测时间：2024-10-30 18:10</view>
					<view class="tips">检测结果：毛孔粗糙-轻度、肤色不均-轻度</view>
				</view>
				<view class="ft-txt">到底了~</view>
			</view>
		</view>
		<view v-show="tabOn === 3">
			<!-- 我的分销码 -->
			<view class="code">
				<view class="code-hd">
					<view class="code-hd-l">店长账号：Kylie5927</view>
					<view class="code-hd-r">
						<view class="txt">时代广场店</view>
						<image class="allow" src="@/static/images/allow-right.png" mode=""></image>
					</view>
				</view>
				<view class="code-bd">
					<image class="img" src="@/static/images/erweima.png" mode=""></image>
					<view class="code-bd-ft" @click="handleCopyTxt">
						<text class="txt">分销码: 627598</text>
						<image class="copy" src="@/static/images/copy.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	let tabOn = ref(1)
	let tabClick = (val) =>{
		tabOn.value = val
	}
	let handleCopyTxt = () => {
		uni.setClipboardData({
			data: '627598',
			success: function () {
				// console.log('success');
			}
		});
	}
	
	let tabItems = ref([
		{
			id: 1,
			state: true,
			name: "当天"
		},
		{
			id: 2,
			state: false,
			name: "近一周"
		},
		{
			id: 3,
			state: false,
			name: "近一个月"
		},
		{
			id: 4,
			state: false,
			name: "近半年"
		},
		{
			id: 5,
			state: false,
			name: "近一年"
		},
	])
	let handleTab = (id) => {
		tabItems.value.forEach((item)=> {
			if(item.id == id){
				item.state = true
			}else{
				item.state = false
			}
		})
	}
</script>

<style lang="scss">
.tab-hd{
	display: flex;
	align-items: center;
	justify-content: space-around;
	height: 110rpx;
	line-height: 110rpx;
	
	.txt{
		font-size: 24rpx;
		color: #333;
		font-weight: 500;
		position: relative;
		
		&.on{
			font-size: 30rpx;
			font-weight: bold;
		}
		&.on::after{
			content: '';
			position: absolute;
			right: -6%;
			top: 30%;
			width: 20rpx;
			height: 20rpx;
			border-radius: 20px;
			background: linear-gradient(45deg, transparent, #afeaf2);
		}
	}
}
.tab-bd{
	
	.item{
		width: 670rpx;
		border-radius: 20rpx;
		padding: 50rpx 40rpx 40rpx;
		box-sizing: border-box;
		margin: 0 auto 20rpx;
		border: 1px solid #fff;
		background: linear-gradient(to bottom, #fff, #f9f9f9);
		
		.item-hd{
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #e1e1e1;
			padding-bottom: 40rpx;
			margin-bottom: 40rpx;
			
			.item-hd-l{
				display: flex;
				align-items: center;
				
				.init{
					width: 100rpx;
					height: 100rpx;
					border-radius: 100px;
					background: #f3f3f3;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 30rpx;
					font-weight: bold;
				}
				.con-box{
					.name{
						font-size: 28rpx;
						color: #333;
						font-weight: bold;
						margin-bottom: 10rpx;
					}
					.tips-box{
						display: flex;
						align-items: center;
						.img{
							width: 22rpx;
							height: 19rpx;
						}
						.tips{
							font-size: 20rpx;
							color: #333;
							margin-left: 10rpx;
						}
					}
				}
			}
			.item-hd-r{
				width: 160rpx;
				height: 64rpx;
				border-radius: 64px;
				background: #aae9f2;
				color: #333;
				font-size: 24rpx;
				font-weight: 500;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		.item-ft{
			display: flex;
			align-items: center;
			justify-content: space-around;
			.item-ft-l{
				display: flex;
				align-items: center;
				border-right: 1px solid #e1e1e1;
				width: 45%;
				.img{
					width: 24rpx;
					height: 24rpx;
				}
				.phone{
					margin-left: 10rpx;
					font-size: 24rpx;
					color: #333;
				}
			}
			.item-ft-r{
				display: flex;
				align-items: center;
				.img{
					width: 24rpx;
					height: 23rpx;
				}
				.txt{
					margin-left: 10rpx;
					font-size: 24rpx;
					color: #333;
				}
			}
		}
	}
	
	
	.testTab-hd{
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 40rpx 0rpx;
		border-radius: 50rpx 50rpx 0 0;
		background: linear-gradient(to bottom, #fff 4%, #f5f5f5);
		
		.testItem{
			font-size: 28rpx;
			color: #888;
			padding-bottom: 16rpx;
			
			&.on{
				color: #333;
				font-weight: bold;
				background: url("@/static/images/bg3.png") no-repeat left 30rpx;
				background-size: 30px;
			}
		}
	}
	.testTab-bd{
		.testTab-bd-item{
			width: 670rpx;
			background: #fff;
			border-radius: 20rpx;
			margin: 0 auto 20rpx;
			padding: 50rpx 40rpx;
			box-sizing: border-box;
			
			.title{
				font-size: 32rpx;
				color: #333;
				font-weight: bold;
				border-bottom: 1px solid #e1e1e1;
				padding-bottom: 30rpx;
				margin-bottom: 30rpx;
			}
			.tips{
				font-size: 24rpx;
				color: #555;
				line-height: 42rpx;
				font-weight: lighter;
			}
		}
		.ft-txt{
			font-size: 24rpx;
			color: #888;
			font-weight: lighter;
			text-align: center;
			margin-top: 35rpx;
			padding-bottom: 40rpx;
		}
	}
	
	.code{
		background: #fff;
		width: 670rpx;
		border-radius: 20rpx;
		padding: 50rpx 40rpx 40rpx;
		box-sizing: border-box;
		margin: 0 auto 20rpx;
		
		.code-hd{
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px dotted #e1e1e1;
			padding-bottom: 40rpx;
			position: relative;
			
			&:before{
				content: "";
				width: 40rpx;
				height: 40rpx;
				border-radius: 40px;
				background: #f5f5f5;
				position: absolute;
				left: -60rpx;
				top: 60rpx;
			}
			&::after{
				content: "";
				width: 40rpx;
				height: 40rpx;
				border-radius: 40px;
				background: #f5f5f5;
				position: absolute;
				right: -60rpx;
				top: 60rpx;
			}
			
			.code-hd-l{
				font-size: 28rpx;
				color: #888;
			}
			.code-hd-r{
				display: flex;
				align-items: center;
				.txt{
					font-size: 28rpx;
					color: #333;
					font-weight: 500;
					margin-right: 10rpx;
				}
				.allow{
					width: 11rpx;
					height: 21rpx;
				}
			}
		}
		.code-bd{
			padding: 140rpx 0;
			.img{
				width: 280rpx;
				height: 280rpx;
				margin: 0 auto;
				display: block;
			}
			.code-bd-ft{
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 30rpx;
				.txt{
					font-size: 28rpx;
					color: #333;
				}
				.copy{
					width: 25rpx;
					height: 25rpx;
					margin-left: 10rpx;
				}
			}
		}
	}
}
</style>
